import { MessageBox } from 'element-ui'

// el-upload组件，文件列表模式添加图片展示
export const upload_seeimg = {
    bind(el, binding, vnode) {
        vnode.componentInstance.$watch('uploadFiles', () => vnode.componentInstance.$nextTick(() => {
            el.querySelector('.el-upload-list').style.cssText = 'display:flex;flex-wrap:wrap;'
            const doms = [...el.querySelectorAll('.el-upload-list>li')]
            if (doms.length !== vnode.componentInstance.uploadFiles.length) return
            doms.forEach((item, index) => {
                const textDom = item.querySelector('.el-upload-list__item-name')
                textDom.title = '点击下载查看'
                const url = vnode.componentInstance.uploadFiles[index].url
                if (!url) return
                if (url.endsWith('.png') || url.endsWith('.jpg') || url.endsWith('.jpeg') || url.endsWith('.gif')) {
                    item.style.cssText = 'width:auto;order:1;margin:5px;'
                    textDom.style.display = 'none'
                    if (!item.querySelector('.v-upload-seeimg-img')) {
                        const img = document.createElement('img')
                        img.src = url
                        img.className = 'v-upload-seeimg-img'
                        img.style.cssText = 'display:block;width:118px;height:118px;border-radius:6px;object-fit:cover;cursor:pointer;box-shadow:0 0 5px #ccc;'
                        img.title = '点击预览'
                        img.addEventListener('click', () => {
                            MessageBox({
                                title: '图片预览',
                                message: `<img src="${url}" style="width:100%;height:100%;object-fit:contain;">`,
                                showCancelButton: false,
                                showConfirmButton: false,
                                dangerouslyUseHTMLString: true,
                                customClass: 'v-upload-seeimg-msgbox',
                            })
                        })
                        item.appendChild(img)
                    }
                }
            })
        }),
        { deep: true, immediate: true })
    },
}